
<script setup lang="ts" type="module">
import {
  ref,
  onMounted,
  watch,
  reactive,
  onUpdated,
  toRefs,
  toRef,
  Ref,
  defineEmits,
  defineProps,
} from "vue";
import { useRouter, RouterView } from "vue-router";
import { ElMessage } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";
import { Plus } from "@element-plus/icons-vue";
import { uploadVideo, uploadFilePrivate, uploadImgPublic } from "@/apis/http";
import type { UploadProps } from "element-plus";
const imageUrl: any = ref("");
let excelName = ref("");
const isLoading = ref(false);
let uploadClass: Ref<string[]> = ref(["mp4"]);
const flag = ref(false);
const emit = defineEmits(["messageUrl",'messageName', "shipVideo", "picturesShips"]);
let data: any = ref();
onMounted: {
}
//上传文件格式
const formatData = ref(["docx", "doc", "xls", "xlsx", "pdf", "zip", "rar"]);
//上传视频格式
const formatDatas = ref(["mp4"]);
//上传图片
const formatDataImg = ref(["jpeg", "jpg", "png", "gif"]);
const props = defineProps<{
  checkOut?: Number;
  title?: String;
  color?: String;
  httpurl?: String;
  echoImg?: String;
  multiple?: Boolean;
}>();
const filesLength = ref(0);
let uploadFiles: any = ref([]);
const uploadFileList: any = ref([]);
const fileName:any=ref([])
const uploadEle: any = ref(null);

// if(props.echoImg){
//   imageUrl.value=props.echoImg
// }
watch(
  () => props.echoImg,
  (val) => {
    if(uploadFileList.value.length==0){
      console.log(val, "---------");
    uploadFileList.value = val;
    uploadFileList.value.forEach((item: any) => {
      fileName.value.push(item.filename)
    });
    }
    emit("picturesShips", uploadFileList.value);
    emit("messageUrl", uploadFileList.value);
      emit ('messageName',fileName)
      emit("shipVideo", uploadFileList.value);
  }
);


const changeFileLength = (file: any, fileList: any) => {
  uploadEle.value.clearFiles();
};
const uploadAction = (option: any) => {
  isLoading.value=true
  flag.value = false;
  console.log(option);
  data =
    props.checkOut == 1
      ? formatData
      : props.checkOut == 2
      ? formatDatas
      : formatDataImg;
  let param = new FormData();
  param.set("file", option.file);

  for (var i of data.value) {
    if (option.file.name.indexOf(i) != -1) {
      flag.value = true;
    }
  }
  console.log(flag.value);
  if (flag.value == false) {
    isLoading.value = false;
    ElMessage.error("文件仅" + props.title);
    return false;
  } else if (option.file.size / 1024 / 1024 > 30) {
    isLoading.value = false;
    ElMessage.error("上传文件大小不能超过 30MB");
    return false;
  }

  if (props.checkOut == 1) {
    uploadFilePrivateLoad(param,option.file.name);
  } else if (props.checkOut == 2) {
    console.log(param)
    uploadVideoLoad(param);
  } else {
    console.log(1111111);
    uploadImgPublicLoad(param);
  }

  // uploadFiles.value.push(option);

  // console.log(uploadFiles.value.length, filesLength.value);
  // if (uploadFiles.value.length == filesLength.value) {
  //   //  console.log(uploadFiles, "===___");
  //   uploadEle.value.clearFiles();
  //   uploadFiles.value.forEach((item: any, index: any) => {

  //     let param = new FormData();
  //     param.set("file", item.file);

  //     for (var i of data.value) {
  //       if (item.file.name.indexOf(i) != -1) {
  //         flag.value = true;
  //         console.log(flag.value);
  //       }
  //     }

  //     if (flag.value == false) {
  //       isLoading.value = false;
  //       ElMessage.error("文件仅" + props.title);
  //       return false;
  //     } else if (item.size / 1024 / 1024 > 30) {
  //       isLoading.value = false;
  //       ElMessage.error("上传文件大小不能超过 30MB");
  //       return false;
  //     }

  //     if (props.checkOut == 1) {

  //       uploadFilePrivateLoad(param)
  //     } else if (props.checkOut == 2) {
  //       uploadVideoLoad(param)
  //     } else {
  //       console.log(1111111)
  //       uploadImgPublicLoad(param)
  //     }
  //   });
  // }
};
//文件上传
function uploadFilePrivateLoad(param: any,name:any) {
  uploadFilePrivate(param).then((res: any) => {
    if (res && res.code === 0) {
      isLoading.value = false;
      // imageUrl.value = res.data.filePath;
      uploadFileList.value.push(res.data);
      fileName.value.push(name)
      excelName.value = "1.doc";
      emit("messageUrl", uploadFileList.value);
      emit ('messageName',fileName)
      ElMessage.success("文件上传成功！");
    } else {
      isLoading.value = false;
      if (res && res.msg) {
        ElMessage.error(res.msg);
      } else {
        ElMessage.error("文件上传失败！");
      }
    }
  });
}
//视频上传
function uploadVideoLoad(param: any) {
  uploadVideo(param).then((res: any) => {
    if (res && res.code === 0) {
      isLoading.value = false;
      uploadFileList.value.push(res.data);
      console.log(uploadFileList)
      emit("shipVideo", uploadFileList.value);
      ElMessage.success("视频上传成功！");
     
    } else {
      isLoading.value = false;
      if (res && res.msg) {
        ElMessage.error(res.msg);
      } else {
        ElMessage.error("视频上传失败！");
      }
    }
  });
}
//图片上传
function uploadImgPublicLoad(param: any) {
  uploadImgPublic(param).then((res: any) => { 
    if (res && res.code === 0) {
      isLoading.value = false;
    
      uploadFileList.value.push(res.data);
      emit("picturesShips", uploadFileList.value);
      ElMessage.success("图片上传成功！");
    } else {
      isLoading.value = false;
      if (res && res.msg) {
        ElMessage.error(res.msg);
      } else {
        ElMessage.error("图片上传失败！");
      }
    }
  });
}
// import { agvs, agvsDetails } from "../apis/http";
const getSomething = (val: boolean) => {};
const router = useRouter();
onMounted: {
}
// const props = withDefaults(defineProps<{
//     checkOut:number,
//     title:string,
//     color:string,
//     formatData:Array<string>
// 	}>(),{

//     });

const delImg = (index: any) => {
  console.log(index,uploadFileList);
  uploadFileList.value.splice(index, 1);
  fileName.value.splice(index, 1);
  emit ('messageName',fileName)
  emit("messageUrl", uploadFileList.value);
  emit("picturesShips", uploadFileList.value);
  emit("shipVideo", uploadFileList.value);
};
</script>

<template>
  <div class="Upload">
    <ul class="uploadImg">
      <li v-for="(item, index) in uploadFileList" :key="index" :style="props.checkOut==2?'width:200px':''">
        <img
          v-if="uploadFileList && checkOut == 3"
          :src="item.OSSUrl"
          class="avatar"
        />
        <video
          v-if="uploadFileList && checkOut == 2"
          :src="item.OSSUrl"
          class="video-avatar"
                    :autoplay="false"
                    controls
                    muted
        ></video>
        <div v-if="uploadFileList && checkOut == 1" class="checkWj">
          <img src="@/assets/images/wenjian.jpeg" alt="" />
          <p v-if="item.filename">{{ item.filename }}</p>
        </div>
        <div class="del" @click="delImg(index)"><span>X</span> 删除</div>
      </li>
      <!-- 文件以及图片 -->
      <li v-if="props.checkOut!=2">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="uploadAction"
          :on-change="changeFileLength"
          :id="imageUrl ? 'isborder' : ''"
          :multiple="multiple"
          ref="uploadEle"
        >
          <div>
            <el-button>上传文件</el-button>
            <span v-if="checkOut == 1">{{
              title ? title : "支持docx,doc,xls,xlsx,pdf,zip,rar格式"
            }}</span>
            <span v-else-if="checkOut == 2">{{
              title ? title : "支持avi、mp4、wmv格式"
            }}</span>
            <span v-else>{{
              title
                ? title
                : "支持JPG，JPEG，PNG，GIF,上传图片大小不能超过 10MB"
            }}</span>
          </div>
         
        </el-upload>
      </li>

      <!-- 视屏 -->
      <li v-else>
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="uploadAction"
          :on-change="changeFileLength"
          :id="imageUrl ? 'isborder' : ''"
          :multiple="multiple"
          ref="uploadEle"
          v-if="uploadFileList.length==0"
          v-loading="isLoading"
        >
          <div>
            <el-button>上传文件</el-button>
            <span v-if="checkOut == 1">{{
              title ? title : "支持docx,doc,xls,xlsx,pdf,zip,rar格式"
            }}</span>
            <span v-else-if="checkOut == 2">{{
              title ? title : "支持avi、mp4、wmv格式"
            }}</span>
            <span v-else>{{
              title
                ? title
                : "支持JPG，JPEG，PNG，GIF,上传图片大小不能超过 10MB"
            }}</span>
          </div>
       
        </el-upload>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
@import "./index.scss";
#isborder {
  border: 1px solid #eee;
}



</style>
